<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="root">

        <div class="item">1</div>
        <div class="item">2</div>
        <button class="item">3</button>

    </div>
    
</body>


<style>
    .root{
        width: 800px;
        height: 500px;
        border: lightgrey solid 1px;
        display: flex;
        /* 主轴方向 */
        flex-direction: row;
        /* 换行 */
        flex-wrap: nowrap;
        /* flex-flow === flex-direction || flex-wrap */
        /* flex-flow: row wrap; */
        /* 主轴对其方式 */
        justify-content: space-between;
         /* 交叉轴对其方式 单行 */
        /* align-items: stretch; */
        /*交叉轴对其方式 多行 默认方式:stretch */
        align-content: space-between;
    }
    .item{
        /* width: 100px;
        height: 100px; */
        flex-basis: 100px;
        color: white;
        line-height: 100px;
        font-size: 40px;
        text-align: center;
    }
    .item:nth-of-type(1){
        /*flex-basis 在主轴上的size  */
        flex-basis: 150px;
         /* order :调整item在父元素中的顺序，
            值默认0
            越小排在越前面*/
            
        /* flex-grow 元素放大main axis轴上的size 填充父元素的空余位置 
           flex-grow: 0 默认值为0
           放大比例算法: 
           1、 所有子flex-grow值的和大于1的算法 
           item拉伸的size = 剩余空间size *（单个flex-grow的值 / 所有flex-grow值的和 ）
           2、所有flex-grow值的和小于1的算法 
           所有flex-grow值的和小于1，item总size肯定小于 mian-axis size 
           显示的size = basisSize +（剩余空间size * 所有flex-grow值 ）*（单个flex-grow的值 / 所有flex-grow值的和 ）
        */ 

        /* flex-shrink: 子元素压缩main axis轴上的size，压缩超出父元素的那部分宽度（flex-shrink值为非0的元素）
           flex-shrink 默认值为1; 
           flex-shrink: 0 不压缩
           压缩比例算法: 
           1，所有子flex-shrink值的和大于等于1的算法 
           显示的size = base-size - （超出的size）*（flex-shrink的值 / 所有子flex-shrink值的和）
           2，所有子flex-shrink值的和小于等于1的算法 
           所有flex-shrink值的和小于1，item总的宽度肯定大于 mian-axis size 
           显示的size = base-size - （超出的size * 所有子flex-shrink值的和）*（flex-shrink的值 / 所有子flex-shrink值的和）
        */ 
        /* align-self 子元素自定义在父元素 交叉轴 中的对其方式 */
        flex-shrink: 2;
        background-color: rgb(133, 77, 5);
        align-self: flex-end;
    }
    .item:nth-of-type(2){
        flex-shrink: 1;
        background-color: rgb(50, 31, 119);
        align-self: center;
    }
    .item:nth-of-type(3){
        flex-shrink: 1;
        align-self: stretch;
        background-color: rgb(153, 197, 56);
    }
</style>

</html>